<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="color-scheme" content="light dark" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Закрывающий тег</title>
    <link rel="stylesheet" href="./fonts/fonts.css" />
    <link rel="stylesheet" href="./styles/variables.css" />
    <link rel="stylesheet" href="./styles/globals.css" />
    <link rel="stylesheet" href="./styles/style.css" />
    <link rel="stylesheet" href="./styles/animations.css" />
    <link rel="stylesheet" href="./styles/themes.css" />
    <link rel="icon" href="./images/favicon.ico" sizes="any" />
    <link rel="icon" href="./svg/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="./images/favicon.png" />
    <script src="./scripts/set-theme.js"></script>
  </head>
  <body class="page">
    <header class="header">
      <div class="header-content">
        <a class="header__title">&lt;/HTML&gt;</a>
        <h1 class="header__name">закрывающий тег</h1>
        <nav class="theme-menu header__theme-menu">
          <!-- Не меняйте разметку этого списка, иначе скрипты перестанут работать -->
          <ul class="theme-menu__list">
            <li class="theme-menu__item">
              <button
                type="button"
                data-theme="dark"
                class="theme-menu__button"
              >
                Темно
              </button>
            </li>
            <li class="theme-menu__item">
              <button
                type="button"
                data-theme="auto"
                disabled
                class="theme-menu__button"
              >
                Авто
              </button>
            </li>
            <li class="theme-menu__item">
              <button
                type="button"
                data-theme="light"
                class="theme-menu__button"
              >
                Светло
              </button>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <main class="main">
      <div class="card-list">
        <article class="card">
          <h2 class="card-title">
            Фритрек и нулевой спринт: Подготовка к работе
          </h2>
          <div class="card-img-section">
            <div class="card-img-container">
              <img
                class="card-img"
                src="./images/card-image-1.png"
                alt="белый фургон стоит на фоне ночного неба"
              />
            </div>
            <span class="card-img-label">&lt;/HTML&gt;</span>
          </div>
          <div class="card-text-section">
            <p class="card-text">
              Это было самое начало пути. На этом этапе важно было проникнуться
              основами и настроиться на учёбу. И, возможно, подумать, как новые
              знания могут повлиять на ваше будущее.
            </p>
            <p class="card-text">
              Место для ваших воспоминаний о начале обучения.
            </p>
          </div>
          <div class="card__button-section">
            <button type="button" class="card__icon-button">
              <svg
                class="like-icon"
                width="39"
                height="36"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g class="heart-icon">
                  <path
                    class="contour"
                    d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z"
                    fill="var(--contour-color)"
                  />
                  <path
                    class="main-body"
                    d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                  <path
                    class="core"
                    d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                </g>
                <path
                  class="sparks"
                  d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z"
                  fill="var(--core-color)"
                />
              </svg>
            </button>
            <button type="button" class="button card__like-button">
              <span class="button__text">Like</span>
            </button>
          </div>
        </article>
        <article class="card">
          <h2 class="card-title">1 спринт: Я — чистый лист</h2>
          <div class="card-img-section">
            <div class="card-img-container">
              <img
                class="card-img filter_grayscale"
                src="./images/card-image-1.png"
                alt="белый фургон стоит на фоне ночного неба"
              />
            </div>
            <span class="card-img-label">&lt;/HTML&gt;</span>
          </div>
          <div class="card-text-section">
            <p class="card-text">
              На первых этапах мы работали со страхами и сомнениями, которые
              часто испытывают новички. Один из них — страх перед чистым листом.
              Это, конечно же, намного сложнее, чем боязнь куска бумаги. Часто
              за этим ощущением скрываются более глубокие вопросы: с чего
              начать? а вдруг будет слишком сложно? что, если я не справлюсь?
            </p>
            <p class="card-text">
              Место для ваших воспоминаний о начале первого спринта.
            </p>
          </div>
          <div class="card__button-section">
            <button type="button" class="card__icon-button">
              <svg
                class="like-icon"
                width="39"
                height="36"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g class="heart-icon">
                  <path
                    class="contour"
                    d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z"
                    fill="var(--contour-color)"
                  />
                  <path
                    class="main-body"
                    d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                  <path
                    class="core"
                    d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                </g>
                <path
                  class="sparks"
                  d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z"
                  fill="var(--core-color)"
                />
              </svg>
            </button>
            <button type="button" class="button card__like-button">
              <span class="button__text">Like</span>
            </button>
          </div>
        </article>
        <article class="card">
          <h2 class="card-title">1 спринт: А если не получится?</h2>
          <div class="card-img-section">
            <div class="card-img-container">
              <img
                class="card-img filter_brightness"
                src="./images/card-image-1.png"
                alt="белый фургон стоит на фоне ночного неба"
              />
            </div>
            <span class="card-img-label">&lt;/HTML&gt;</span>
          </div>
          <div class="card-text-section">
            <p class="card-text">
              Первый проект — позади! Но это всё ещё самое начало пути. Радость
              могла быстро померкнуть и смениться ожиданием провала. Или вы,
              наоборот, могли вдохновиться успехами и поверить в себя.
            </p>
            <p class="card-text">
              Место для ваших воспоминаний об окончании первого спринта.
            </p>
          </div>
          <div class="card__button-section">
            <button type="button" class="card__icon-button">
              <svg
                class="like-icon"
                width="39"
                height="36"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g class="heart-icon">
                  <path
                    class="contour"
                    d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z"
                    fill="var(--contour-color)"
                  />
                  <path
                    class="main-body"
                    d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                  <path
                    class="core"
                    d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                </g>
                <path
                  class="sparks"
                  d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z"
                  fill="var(--core-color)"
                />
              </svg>
            </button>
            <button type="button" class="button card__like-button">
              <span class="button__text">Like</span>
            </button>
          </div>
        </article>
        <article class="card">
          <h2 class="card-title">2 спринт: Погоня за идеалом</h2>
          <div class="card-img-section">
            <div class="card-img-container">
              <img
                class="card-img filter_hue-rotate"
                src="./images/card-image-1.png"
                alt="белый фургон стоит на фоне ночного неба"
              />
            </div>
            <span class="card-img-label">&lt;/HTML&gt;</span>
          </div>
          <div class="card-text-section">
            <p class="card-text">
              На этом этапе вы уже достаточно разбирались в основах вёрстки,
              чтобы понять, как много ещё впереди. Вы могли попытаться погнаться
              за идеалом и понять, что он недостижим. А, может, вы вовсе и не
              подвержены перфекционизму и вместо того, чтобы сделать идеально,
              старались просто сделать.
            </p>
            <p class="card-text">
              Место для ваших воспоминаний о начале второго спринта.
            </p>
          </div>
          <div class="card__button-section">
            <button type="button" class="card__icon-button">
              <svg
                class="like-icon"
                width="39"
                height="36"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g class="heart-icon">
                  <path
                    class="contour"
                    d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z"
                    fill="var(--contour-color)"
                  />
                  <path
                    class="main-body"
                    d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                  <path
                    class="core"
                    d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                </g>
                <path
                  class="sparks"
                  d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z"
                  fill="var(--core-color)"
                />
              </svg>
            </button>
            <button type="button" class="button card__like-button">
              <span class="button__text">Like</span>
            </button>
          </div>
        </article>
        <article class="card">
          <h2 class="card-title">2 спринт: О тех, кто рядом</h2>
          <div class="card-img-section">
            <div class="card-img-container">
              <img
                class="card-img filter_invert"
                src="./images/card-image-1.png"
                alt="белый фургон стоит на фоне ночного неба"
              />
            </div>
            <span class="card-img-label">&lt;/CSS&gt;</span>
          </div>
          <div class="card-text-section">
            <p class="card-text">
              Всё это время вы были не одиноки (хотя, возможно, иногда и
              чувствовали, что одни против целого мира). Вас окружали
              одногруппники, команда сопровождения и просто близкие люди,
              которым можно пожаловаться, если очередной макет просто так не
              поддавался. Осваивать что-то новое легче, когда рядом есть
              единомышленники, не правда ли?
            </p>
            <p class="card-text">
              Место для ваших воспоминаний об окончании второго спринта.
            </p>
          </div>
          <div class="card__button-section">
            <button type="button" class="card__icon-button">
              <svg
                class="like-icon"
                width="39"
                height="36"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g class="heart-icon">
                  <path
                    class="contour"
                    d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z"
                    fill="var(--contour-color)"
                  />
                  <path
                    class="main-body"
                    d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                  <path
                    class="core"
                    d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                </g>
                <path
                  class="sparks"
                  d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z"
                  fill="var(--core-color)"
                />
              </svg>
            </button>
            <button type="button" class="button card__like-button">
              <span class="button__text">Like</span>
            </button>
          </div>
        </article>
        <article class="card">
          <h2 class="card-title">3 спринт: Обходные стратегии</h2>
          <div class="card-img-section">
            <div class="card-img-container">
              <img
                class="card-img filter_saturate"
                src="./images/card-image-1.png"
                alt="белый фургон стоит на фоне ночного неба"
              />
            </div>
            <span class="card-img-label">&lt;/desigions&gt;</span>
          </div>
          <div class="card-text-section">
            <p class="card-text">
              На этом курсе вы постоянно решали разные задачи. В какой-то момент
              вам могло показаться, что решения просто иссякли. Значит, пришло
              время посмотреть на задачу под другим углом.
            </p>
            <p class="card-text">
              Место для ваших воспоминаний о начале третьего спринта.
            </p>
          </div>
          <div class="card__button-section">
            <button type="button" class="card__icon-button">
              <svg
                class="like-icon"
                width="39"
                height="36"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g class="heart-icon">
                  <path
                    class="contour"
                    d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z"
                    fill="var(--contour-color)"
                  />
                  <path
                    class="main-body"
                    d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                  <path
                    class="core"
                    d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                </g>
                <path
                  class="sparks"
                  d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z"
                  fill="var(--core-color)"
                />
              </svg>
            </button>
            <button type="button" class="button card__like-button">
              <span class="button__text">Like</span>
            </button>
          </div>
        </article>
        <article class="card">
          <h2 class="card-title">3 спринт: Когда опускаются руки</h2>
          <div class="card-img-section">
            <div class="card-img-container">
              <img
                class="card-img filter_blur"
                src="./images/card-image-1.png"
                alt="белый фургон стоит на фоне ночного неба"
              />
            </div>
            <span class="card-img-label">care</span>
          </div>
          <div class="card-text-section">
            <p class="card-text">
              Во время учёбы часто возникает чувство, когда не знаешь, за что
              хвататься. Вроде и проектную пора сдавать, и задачи хочется
              порешать, и в теории получше разобраться, и жизнь не забыть
              пожить. В такие моменты очень нужна концентрация. Вспомните,
              откуда вы её черпали.
            </p>
            <p class="card-text">
              Место для ваших воспоминаний об окончании третьего спринта.
            </p>
          </div>
          <div class="card__button-section">
            <button type="button" class="card__icon-button">
              <svg
                class="like-icon"
                width="39"
                height="36"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g class="heart-icon">
                  <path
                    class="contour"
                    d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z"
                    fill="var(--contour-color)"
                  />
                  <path
                    class="main-body"
                    d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                  <path
                    class="core"
                    d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                </g>
                <path
                  class="sparks"
                  d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z"
                  fill="var(--core-color)"
                />
              </svg>
            </button>
            <button type="button" class="button card__like-button">
              <span class="button__text">Like</span>
            </button>
          </div>
        </article>
        <article class="card">
          <h2 class="card-title">«Сейчас я здесь»</h2>
          <div class="card-img-section">
            <div class="card-img-container">
              <img
                class="card-img filter_opacity"
                src="./images/card-image-1.png"
                alt="белый фургон стоит на фоне ночного неба"
              />
            </div>
            <span class="card-img-label">&lt;support&gt;</span>
          </div>
          <div class="card-text-section">
            <p class="card-text">
              Сейчас вы уже очень много знаете о вёрстке. Но это только начало.
              Во-первых, впереди ещё много материала про «красотищу». Во-вторых,
              с окончанием курса учёба не заканчивается. Вёрстка — это целый
              мир. И этот мир постоянно меняется. Познать его полностью не
              получится, но это тот случай, когда важен сам процесс познания.
              Ведь часто путь — и есть результат.
            </p>
            <p class="card-text">
              Место, чтобы остановиться, подумать и написать, что вы чувствуете
              в этой точке пути.
            </p>
          </div>
          <div class="card__button-section">
            <button type="button" class="card__icon-button">
              <svg
                class="like-icon"
                width="39"
                height="36"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g class="heart-icon">
                  <path
                    class="contour"
                    d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z"
                    fill="var(--contour-color)"
                  />
                  <path
                    class="main-body"
                    d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                  <path
                    class="core"
                    d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z"
                    fill="var(--core-color)"
                  />
                </g>
                <path
                  class="sparks"
                  d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z"
                  fill="var(--core-color)"
                />
              </svg>
            </button>
            <button type="button" class="button card__like-button">
              <span class="button__text">Like</span>
            </button>
          </div>
        </article>
      </div>
      <button
        type="button"
        class="button footer-button"
        onclick="window['dialog-id'].showModal()"
        aria-controls="dialog-id"
      >
        <svg class="footer-image" viewBox="0 0 21 21">
          <use href="./svg/floppy-optimized.svg#floppy"></use>
        </svg>
        <span class="button__text">Сохранить на память</span>
      </button>
    </main>
    <dialog class="dialog" id="dialog-id">
      <form class="form" method="dialog">
        <div class="form-icon-section">
          <svg class="form-icon" viewBox="0 0 21 21">
            <use href="./svg/floppy-optimized.svg#floppy"></use>
          </svg>
          <p class="form-icon-text">Вставьте дискету, чтобы продолжить</p>
        </div>
        <button
          class="form-button button"
          type="submit"
          onclick="window['dialog-id'.close()]"
        >
          <span class="button__text form-button-text">ok</span>
        </button>
      </form>
    </dialog>
    <script src="./scripts/like.js"></script>
  </body>
</html>
